<template>
  <div class="tag-monitor-record clearfix">
    <total-module ref="totalModule"></total-module>
    <trend-module ref="trendModule" @refresh="refreshFun"></trend-module>
    <top10-module ref="top10Module" @refresh="refreshFun"></top10-module>
    <top10-user-module ref="top10UserModule" @refresh="refreshFun"></top10-user-module>
  </div>
</template>

<script>
import totalModule from './record-total'
import trendModule from './record-trend'
import top10Module from './record-top10'
import top10UserModule from './record-top10-user'
export default {
  components: {
    totalModule,
    trendModule,
    top10Module,
    top10UserModule
  },
  data() {
    return {}
  },
  methods: {
    refreshFun() {
      this.$refs.totalModule.getData()
      this.$refs.trendModule.getData()
      this.$refs.top10Module.getData()
      this.$refs.top10UserModule.getData()
    }
  }
}
</script>

<style lang="scss">
.tag-monitor-record {
  .el-card {
    border: 1px solid $border-color;
  }
  .el-card__body {
    padding: 20px 30px;
  }
  .card-title {
    color: #01377e;
    position: relative;
    .el-button {
      position: absolute;
      padding: 3px;
      top: -4px;
      right: 0;
      &.refresh-button {
        right: 30px;
      }
    }
  }
}
</style>
